<template>
  <div style="height: 100%;">
    <v-scroll :on-refresh="onRefresh">
      <ul class="rank-list">
        <p v-if="rankList.length===0" class="back-tip">榜上无人</p>
        <li v-for="(user,index) in rankList" :key="index">
          <div v-if="index<3" class="index">
            <img :src="PIC['NO'+(index+1)]" alt="">
          </div>
          <div v-else class="index">{{1+index}}</div>
          <div class="header">
            <img :src="user.headImg">
          </div>
          <div class="name">{{user.name}}</div>
          <div class="amount">{{user.giftAmount}}金</div>
        </li>
      </ul>
    </v-scroll>
  </div>
</template>
<script>
  import './rank.scss';
  import {
    mapGetters
  } from "vuex";
  import {
    STATIC_PIC_PTH
  } from 'tools/config.js';

  export default {
    name: "redPack",
    components: {
      'v-scroll': require("../module/pull-refresh")
    },
    props: {
      isShow: {
        type: Boolean
      }
    },
    data() {
      return {
        isShow: false, //是否显示排行榜
        rankList: [], //是不是显示
        PIC: STATIC_PIC_PTH,

        counter: 1, //当前页
        num: 10, // 一页显示多少条
        pageStart: 0, // 开始页数
        pageEnd: 0, // 结束页数
        listdata: [], // 下拉更新数据存放数组
        downdata: [], // 上拉更多的数据存放数组
        scrollData: {
          noFlag: false //暂无更多数据显示
        }
      }
    },
    mounted() {
      this.init();
    },
    computed: {
      ...mapGetters(["userInfo", "videoInfo"])
    },
    methods: {
      onRefresh(callback) {
        this.init(callback);
      },
      init(callback) {
        this.$ajax({
          method: "get",
          url: 'giftRecord/rank/' + this.videoInfo.id,
        }).then(response => {
          callback && callback();
          if (response.code === 1) {
            this.rankList = response.data;
            return;
          }
        });
      }
    },
    activated() {
      alert('activated')
      this.init()
    },
    deactivated() {
      alert('deactivated')
    }
  };

</script>
